<template>
  <view class="eCatalog">
    <!-- 标题 -->
    <view class="eCatalog-title" v-if="decideFromVin || decideFromVehicle">{{vinCode || skipBrand }}</view>
    <!-- 汽车信息 -->
    <view class="eCatalog-car-info" v-if="decideFromVin">
      <view class="eCatalog-car-info-top">
        <text v-for="(value,key,index) in topCarInfoObj" :key="index">{{value}}</text>
      </view>
      <view class="eCatalog-car-info-bottom">
        代数:<text v-for="(value,key,index) in bottomCarInfoObj" :key="index">{{value}}</text>
      </view>
    </view>
    <!-- 产品分类 -->
<!--    <view class="eCatalog-parts-type" v-if="decideFromVin || decideFromVehicle">
      <view>
        <text :class="{'partsActive':activePartsType == index }"
         v-for="(item,index) in partsTypeList" :key="index"
         @click="changeActivePartsType(index)"
        >
         {{item}}
        </text>
      </view>
    </view> -->
    <!-- 复制、筛选 -->
    <view class="eCatalog-copy" v-if="decideFromVin || decideFromVehicle">
      <view @click="copyText">
        一键复制
        <!-- <uni-icons type="wallet-filled" size="30"></uni-icons> -->
      </view>
      <view @click="openFilter">筛选</view>
    </view>
    <!-- 产品信息 -->
    <view class="eCatalog-product" v-for="(item,index) in productInfoList" :key="index"> 
      <view class="eCatalog-content-title">{{item.category}}</view>
      <view class="eCatalog-content-body" v-for="(childItem,childIndex) in item.info" :key="childIndex">
        <view class="eCatalog-product-left">
          <image :src="baseUrl + childItem.imageList[0]" mode="" @click="openImage(index,childIndex)"></image>
        </view>
        <view class="eCatalog-product-right">
          <view class="eCatalog-product-right-1">
            <text>{{childItem.brand}}</text>
            <text @click="openProductDetail(childItem,index,childIndex)">{{childItem.number}}</text>
          </view>
          <view>产品型号:{{childItem.category}}-{{childItem.direction || ''}}</view>
          <view v-if="showEngineModel(childItem.engineModel)">发动机型号:{{childItem.engineModel}}</view>
          <view>时间:{{childItem.productStartTime}}-{{childItem.productEndTime}}</view>
          <view class="eCatalog-feedback">
            <uni-icons type="help" size="30"></uni-icons>
            问题反馈
            </view>
        </view>
      </view>
    </view>
    <!-- 筛选抽屉 -->
    <drawer @filterConfirm="filterConfirm" :from="from" :query="query"></drawer>
    <!-- 图片遮罩层 -->
    <productImage :currentImageList="currentImageList"></productImage>
    <!-- 产品详情遮罩层 -->
    <productDetail :currentProductInfo="currentProductInfo"></productDetail>
  </view>
</template>

<script>
  import {mapMutations} from 'vuex'
  import {carInfo,partsType,productInfo} from '@/utils/mock.js'
  import {baseUrl} from '@/config.js'
  import drawer from '@/components/drawer/index.vue'
  import productImage from '@/components/product-image/index.vue'
  import productDetail from '@/components/product-detail/index.vue'
  import {getECatalog} from '@/api/parts/product.js'
  import {getECatalogCar} from '@/api/parts/car.js'
  export default {
    components:{
      drawer,productImage,productDetail,
    },
    data() {
      return {
        vinCode:'',
        skipBrand:'',
        skipBrandCode:'',
        skipNumber:'',
        baseUrl:baseUrl,
        carInfoObj:{},
        topCarInfoObj:{},
        bottomCarInfoObj:{},
        partsTypeList:[],
        activePartsType:0,
        productInfoList:[],
        currentImageList:[],
        currentProductInfo:{},
        queryParams:{
          pageNum: 1,
          pageSize: 10
        },
        from:0,
        query:'',
        filterData:{},
        total:0,
      }
    },
    computed:{
      getActiveType(){
        return this.partsTypeList[this.activePartsType]
      },
      decideFromVin(){
        return (this.vinCode != '')
      },
      decideFromVehicle(){
        return (this.skipBrand != '')
      },
    },
    methods: {
      ...mapMutations('app',['TOGGLE_SWITCH','TOGGLE_IMAGE','TOGGLE_PRODUCT_DETAIL']),
      /* 初始数据*/
      init(filterData){
        let data = {}
        if(this.skipBrand != ''){
          data.brand = this.skipBrand
        }
        if(this.vinCode != ''){
          data.vin = this.vinCode
        }
        if(this.skipNumber != ''){
          data.number = this.skipNumber
        }
        if(this.skipBrandCode != ''){
          data.brandCode = this.skipBrandCode
        }
        if(filterData){
          data = {...data,...filterData}
        }
        data = {...data,...this.queryParams}
        getECatalog(data).then(res=>{
          // debugger
          this.productInfoList = res.rows
          this.total = res.total
        })
      },
      initCar(){
        if(this.from != 2){
          return ;
        }
        let data = {
          vin:this.query,
        }
        getECatalogCar(data).then(res=>{
          this.carInfoObj = res.data
          this.initCarData(this.carInfoObj)
        })
      },
      initCarData(carInfo){
        // this.carInfoObj = carInfo
        this.topCarInfoObj = {
          brand:carInfo.brand,//品牌
          type:carInfo.type, // 车型号
          origin:carInfo.origin, //产型
          batch: `(${carInfo.batch})`,//批次
        }
        this.bottomCarInfoObj = {
          axlesCount:carInfo.axlesCount, //轴数
          carYear:carInfo.carYear, //生产年份
          carSpan:`[${carInfo.carStartTime}-${carInfo.carEndTime}]`, //时间区间
          displacement:carInfo.displacement, //排量,
          velocity:carInfo.velocity, //速度G值，
          combustionYype:carInfo.combustionYype, //燃烧种类，
          engineModel:carInfo.engineModel, //发动机型号
        }
        // this.partsTypeList = partsType  
        // this.productInfoList = productInfo
        // this.activePartsType = partsType[0]
        // console.log("carInfo",carInfo)
        // console.log("this.carInfoObj ",this.carInfoObj)
      },
      showEngineModel(engineModel){
        // let engineModel = this.productInfoList[index].info[childIndex].engineModel
        // console.log("engineModel",engineModel)
        if(!engineModel){
          return false
        }
        return true
      },
      /* 展示产品详情弹窗*/
      openProductDetail(childItem,index,childIndex){
        this.TOGGLE_PRODUCT_DETAIL()
        this.currentProductInfo = this.productInfoList[index].info[childIndex]
      },
      /* 展示图片弹窗*/
      openImage(index,childIndex){
        this.TOGGLE_IMAGE()
        // console.log("this.productInfoList.info",this.productInfoList[index].info[childIndex].image)
        this.currentImageList = this.productInfoList[index].info[childIndex].imageList
        // console.log("---")
      },
      /* 展示筛选弹窗*/
      openFilter(){
        this.TOGGLE_SWITCH()
      },
      /* 复制*/
      copyText(){
        let text = ''
        this.productInfoList.forEach((item)=>{
          text = text + item.category + ":"
          item.info.forEach((childItem)=>{
            text = text + childItem.number + ","
          })
          text = text.substr(0,text.length-1) + ";"
        })
        uni.setClipboardData({
            data: text,
            success: function (res) {
              console.log('复制的信息：',text );
              uni.showToast({
                   title: '复制成功',
              });
            }
        });  
      },
      /* 切换产品分类 */
      changeActivePartsType(index){
        this.activePartsType = index
        // 重新请求数据
        
        /* 暂时逻辑 */
        if(this.activePartsType == 0){
          this.productInfoList = productInfo
        }else{
        this.productInfoList = []
        }
         /* 暂时逻辑 */
      },
      /* 筛选确定完逻辑*/
      filterConfirm(data){
        console.log("filterConfirm",data)
        // 请求数据
        this.filterData = data;
        this.queryParams.pageSize = 10;
        //重新渲染
        this.init(data);
        // this.productInfoList = res
      },
    },
    // 下拉刷新
    // onPullDownRefresh() {
    //     // var allTotal = this.queryParams.pageNum * this.queryParams.pageSize
    //     //this.page为加载次数，this.pageSize为每一次加载的数据条数
    //     // if (allTotal < this.total) {
    //         //this.total为请求数据的总条数。只要现有条数小于总条数就执行一下代码
    //         // this.showTotal = true;
    //     this.queryParams.pageSize += 10;
    //     //加载次数递加
    //     this.init(this.filterData) //请求更多数据列表
    //     // } else {
    //     //     this.showTotal = false;
    //     // }
    //     uni.stopPullDownRefresh();//停止刷新
    // },
    // 触底的事件
    onReachBottom() {
      if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
        return uni.$showMsg('数据加载完毕!')
      } 
      // 让页码值自增+1
      this.queryParams.pageSize += 10;
      this.init(this.filterData);
    },
    onLoad(event) {
      console.log("from",event.from)
      this.params = event;
      this.from = event.from;
      if (event.from == 1) {
        this.skipBrand = event.skipBrand
        this.query = event.skipBrand
      }else if (event.from == 2) {
        this.vinCode = event.vinCode
        this.query = event.vinCode
      }else if (event.from == 3) {
        this.skipNumber = event.skipNumber
      }else if(event.from == 4) {
        this.skipBrandCode = event.skipBrandCode
      }
      this.init()
      // this.initMock()
      this.initCar()
    },
  }
</script>

<style>
  @import url('../../static/style/vin/eCatalog.css');
</style>
